<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="res/layui/css/layui.css" media="all">
    <script type="text/javascript" src="res/vue.js"></script>
    <script type="text/javascript" src="res/axios.js"></script>
</head>
<body>
<div id="main">
    用户名
    <input class="layui-input-block" v-model="name">
    <button class="layui-upload-button" @click="que">查找</button>
    <table id="demo" lay-filter="test"></table>

</div>
<script src="res/layui/layui.js"></script>

<script type="text/javascript">
    let vue = new Vue({
        el: "#main",
        data: {
            name: "",
        },
        methods: {
            que() {
                //  var time = new Date().getTime();
                query(this.name)
            }
        }
    });

    function query(name) {
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: 'query.do?name=' + name //数据接口
            , page: true //开启分页
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'password', title: '密码', width: 80}
                , {field: 'gender', title: '性别', width: 80}
                , {field: 'createAt', title: '创建日期', width: 200, sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 310}
            ]],

        });

        // var filePath = null;
        //监听行工具事件

    }
</script>
<script type="text/html" id="barDemo">
    <button title="编辑" class="layui-btn layui-btn-xs" lay-event="edit">&nbsp;
        <i class="layui-icon layui-icon-edit"></i>&nbsp;
    </button>
    <button title="删除" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">&nbsp;
        <i class="layui-icon layui-icon-delete"></i>&nbsp;
    </button>

</script>
<script>
    var table
    layui.use('table', function () {
        table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: 'query.do' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'password', title: '密码', width: 80}
                , {field: 'gender', title: '性别', width: 80}
                , {field: 'createAt', title: '创建日期', width: 200, sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 310}
            ]]
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(obj.event)
            console.log(data)
            var id = data.id
            var name = data.username
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么 确认后直接删除不可找回 !'
                    , {icon: 7}
                    , function (index) {
                        obj.del();
                        layer.close(index);
                        axios.post('/del.do?id=' + id).then(res => {
                            if (res.data.code === 0) {
                                layer.msg(res.data.msg, {icon: 2})
                            } else {
                                layer.msg(res.data.msg, {icon: 1});
                            }

                        });
                    });
            } else if (obj.event === 'edit') {
                window.location.href = "change.html#" + id +"," + name ;
            }
        });

    });


</script>

</body>
</html>